<template>
  <div
    v-if="equ !== 'pc'"
    class="x-box"
  >
    <div class="x-branch">
      <div class="bg"></div>
      <div class="branch-logo flc">
        <img
          class="h-10px"
          src="@/assets/icons/x-mov.png"
        />
      </div>
      <div
        v-if="title || close"
        class="branch-node-header"
      >
        <div class="branch-title">
          <span>{{ title }}</span>
        </div>
        <div class="branch-close">
          <button
            v-if="close"
            class="close-btn"
            @click="closeBranch"
          >
            <div class="close-content">
              <span>
                {{ loadingValue && loadingValue <
                  10
                  ?
                  `${Math.floor(loadingValue)}s后`
                  : ''
                }}
                  {{
                    closeText
                  }}
                  </span
                >
            </div>
          </button>
        </div>
      </div>
      <scroll-mask
        class="branch-body scroll"
        :class="{ 'pt-6px': !title && !close }"
      >
        <button
          v-for="x in data"
          :key="x.node_id"
          class="branch-node relative"
          @click="handClick(x)"
        >
          {{ x.node_name }}
          <icon-font
            name="btn-next"
            class="text-12px absolute text-[#3A5278] right-14px top-1/2 -mt-6px"
          />
        </button>
        <button
          v-if="skip && !from"
          class="branch-node"
          @click="handClick({ skip: true })"
        >跳过</button>
      </scroll-mask>
      <div
        v-if="skip && from === 'ssml'"
        class="flex justify-end"
      >
        <div
          class="skip bg-[#6B6F71] text-12px relative mb-3px text-center w-70px rounded-12px px-8px py-6px"
          @click="handClick({ skip: true })"
        >
          跳过
        </div>
      </div>
    </div>
  </div>
  <div
    v-else
    class="x-box-pc"
  >
    <div class="x-branch-pc">
      <div class="bg"></div>
      <div class="branch-logo flc px-15px">
        <img src="@/assets/icons/x-mov.png" />
      </div>
      <div
        v-if="title"
        class="branch-node-header"
      >
        <div class="branch-title">
          <span>{{ title }}</span>
        </div>
      </div>
      <scroll-mask
        class="branch-body scroll"
        :class="{
          'pt-5px':
            !title
        }"
      >
        <button
          v-for=" x  in  data "
          :key="x.node_id"
          class="branch-node"
          @click="handClick(x)"
        >
          {{ x.node_name }}
        </button>
        <button
          v-if="skip && !from"
          class="branch-node"
          @click="handClick({ skip: true })"
        >跳过</button>
      </scroll-mask>
      <!-- <div
        v-if="skip && from === 'ssml'"
        class="absolute right-37px bottom-22px"
      >
        <div
          class="skip bg-[#758593] text-13px relative my-5px text-center w-60px rounded-20px px-10px py-7px"
          @click="handClick({ skip: true })"
        >
          跳过
        </div>
      </div> -->
      <div class="branch-footer absolute left-40px bottom-26px w-142px h-30px">
      </div>
      <div
        v-if="skip && from === 'ssml'"
        class="z-1 absolute -top-8px -right-8px"
      >
        <button
          class="ssml-close-btn"
          @click="handClick({ skip: true })"
        >
          <img src="@/assets/icons/pc/pc-close.png" />
        </button>
      </div>
      <div
        v-if="close && from !== 'ssml'"
        class="branch-close"
      >
        <button
          class="close-btn"
          @click="closeBranch"
        >
          <div class="close-content">
            <span>
              {{ loadingValue && loadingValue <
                10
                ?
                `${Math.floor(loadingValue)}
                s后`
                : ''
              }}
                {{
                  closeText
                }}
                </span
              >
          </div>
        </button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="BranchNodeCard">
import { equ } from '../../../../package-env';

interface BranchProps {
  from?: string, // 来源  ssml区分跳过按钮样式
  title?: string,
  data?: Record<string, any>[],
  handEvent?: (node?) => void,
  close?: boolean,
  closeText?: string,
  type?: string,
  skip?: boolean
  loadingValue?: number
}

const props = withDefaults(defineProps<BranchProps>(), {
  title: '',
  close: true,
  closeText: '关闭',
  handEvent: () => undefined,
  skip: true,
  loadingValue: 0,
})

const emit = defineEmits(['close', 'click']);

const closeBranch = () => emit('close');

const handClick = (x) => {
  emit('click', x)
}

</script>

<style
  scoped
  lang="scss"
>
.x-box {
  @apply absolute w-screen flc z-100;
  bottom: 210px;
  height: 325px;
}

.x-branch {
  @apply relative text-white flex flex-col;
  width: 283px;
  padding: 7.5px 22px 12.5px;
  max-height: 100%;
  font-size: 14px;

  .bg {
    @apply absolute top-0 left-0 right-0 bottom-0 z-0 backdrop-filter backdrop-blur-8px;
    background: rgba(239, 247, 255, 0.6);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
  }

  /* .bg-ssml {
    @apply backdrop-blur-8px;
  } */

  .branch-logo {
    @apply absolute text-center;
    top: -10px;
    background: rgba(70, 115, 238, 1);
    border-radius: 10px;
    width: 65px;
    color: #ffffff;
    height: 20px;
    line-height: 20px;
    left: 50%;
    margin-left: -32.5px;
    z-index: 2;
  }

  .branch-node-header {
    position: relative;
    width: 100%;
    display: flex;
    margin-top: 5px;

    .branch-title {
      @apply flex relative flex-1 items-center overflow-hidden;
      height: 39px;
      font-weight: 600;
      font-size: 14px;
      color: #202020;
    }

    .branch-close {
      width: 25%;

      .close-btn {
        @apply absolute;
        top: 9px;
        right: -2px;
        min-width: 35px;
        height: 17.5px;
        border-radius: 3px;
        border: 0.5px solid rgba(0, 0, 0, 0.45);

        .close-content {
          @apply flex justify-center items-center;

          span {
            @apply inline-block transform scale-83;
            color: rgba(0, 0, 0, 0.45);
            font-weight: 500;
            font-size: 10px;
            letter-spacing: 1px;
          }
        }

        &:active {
          border-color: #1A58F7;

          span {
            color: #1A58F7;
          }
        }
      }
    }

  }

  .branch-body {
    @apply flex-1;
    margin-top: 7.5px;
    position: relative;
    z-index: 2;
    margin-bottom: 10px;
    margin-right: -15px;
    padding-right: 15px;

    .branch-node {
      @apply w-full truncate;
      height: 38px;
      font-size: 14px;
      background: #ffffff;
      font-weight: 500;
      padding: 0 26px;
      color: #3A5278;
      opacity: 1;
      border-radius: 20px;

      &+.branch-node {
        margin-top: 10px;
      }

      &:active {
        border: 1px solid #4673EE;
        color: #4673EE;
        background: rgba(224, 236, 239, 0.6);
      }
    }

    /* .ssml-bg {
      background: #ffffff;
      padding: 0 26px;
      color: #3A5278;
    } */
  }

  .skip {
    &:active {
      background: rgba(106, 111, 114, 0.3);
    }
  }

  ::-webkit-scrollbar {
    width: 2px;
  }

  ::-webkit-scrollbar-thumb,
  ::-webkit-scrollbar-thumb:hover,
  ::-webkit-scrollbar-thumb:active {
    background: #4673EE;
  }
}

.x-box-pc {
  @apply absolute flc z-100;
  height: 472px;
  width: 561px;
  top: 134px;
  left: 50%;
  transform: translateX(-88.5%);
}

@media screen and (min-width: 1440px) {
  .x-box-pc {
    transform: translateX(-93%);
  }
}

.x-branch-pc {
  @apply relative text-white flex flex-col;
  width: 283px;
  padding: 7.5px 18px 12.5px;
  max-height: 100%;
  font-size: 14px;
  width: 414px;
  padding: 20px 35px 72px;

  .bg {
    @apply absolute top-0 left-0 right-0 bottom-0 z-0 backdrop-filter backdrop-blur-25px;
    background: linear-gradient(135deg, rgba(215, 228, 255, 0.5) 0%, rgba(215, 228, 255, 0.2) 100%);
    box-shadow: 0px 2px 30px 0px rgba(25, 47, 87, 0.05);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.3);
  }

  .branch-logo {
    @apply absolute text-center z-2 backdrop-filter backdrop-blur-6;
    left: 50%;
    width: 130px;
    top: -20px;
    height: 42px;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0px 2px 30px 0px rgba(25, 47, 87, 0.05);
    border-radius: 20px;
    line-height: 42px;
    margin-left: -65px;
  }

  .branch-node-header {
    position: relative;
    width: 100%;
    margin-top: 20px;

    .branch-title {
      /* font-weight: 500; */
      color: #000000;
      font-size: 16px;
      text-align: center;
    }
  }

  .branch-body {
    @apply flex-1;
    margin-top: 15px;
    margin-right: -12px;
    padding-right: 12px;
    position: relative;
    z-index: 2;
    padding-bottom: 10px;

    .branch-node {
      @apply w-full px-1 truncate;
      border-radius: 10px;
      height: 50px;
      border-radius: 30px;
      font-size: 15px;
      color: rgba(11, 22, 51, 1);
      font-weight: 400;
      background: linear-gradient(360deg, rgba(255, 255, 255, 0.5) 0%, rgba(244, 250, 255, 0.5) 2%, rgba(255, 255, 255, 0.8) 100%);
      border: 1px solid rgba(255, 255, 255, 0.2);
      /* background: rgba(255, 255, 255, 0.5); */
      box-shadow: 0px 2px 30px 0px rgba(25, 47, 87, 0.05);

      &+.branch-node {
        margin-top: 10px;
      }

      &:hover {
        border: 1px solid #006DFF;
        color: #006DFF;
        /* border: 1px solid #5C9BFF; */
        /* background: #BACFEA; */
        /* box-shadow: 0px 2px 30px 0px rgba(25, 47, 87, 0.05); */
      }

      &:focus {
        color: rgba(11, 22, 51, 1);
        background: rgba(92, 155, 255, 0.1);
        border: 1px solid #5C9BFF;
      }
    }
  }

  .skip {
    cursor: pointer;

    &:hover {
      background: rgba(106, 111, 114, 0.7);
    }
  }

  .branch-footer {
    background: url(/src/assets/images/pc/form-logo.png) no-repeat;
    background-size: contain;
  }

  .branch-close {
    position: absolute;
    bottom: 26px;
    right: 20px;
    /* width: 25%; */

    .close-btn {
      @apply opacity-50;
      padding: 3px 8px;
      border-radius: 4px;
      color: #ffffff;
      background: rgba(37, 53, 64, 1);

      .close-content {
        @apply flex justify-center items-center;

        span {
          @apply inline-block transform;
          font-size: 12px;
          letter-spacing: 1px;
        }
      }

      &:active {
        border-color: #1A58F7;

        span {
          color: #1A58F7;
        }
      }
    }
  }

  .ssml-close-btn {
    width: 25px;
    height: 25px;

    &:hover {
      opacity: 0.6;
    }
  }

  ::-webkit-scrollbar {
    width: 4px;
  }

  ::-webkit-scrollbar-thumb,
  ::-webkit-scrollbar-thumb:hover,
  ::-webkit-scrollbar-thumb:active {
    background: #ffffff;
  }
}
</style>
